<template>
  <div class="online">
    <van-nav-bar title="在线客服" left-arrow @click-left="onClickLeft" class="text_2353X1" />
    <p class="text_2369X1">
      <van-icon name="phone" size="20" color="#aaa" class="icon_173X1" />
      <span >正在与机器人对话</span>
    </p>
    <div class="wrapper_750X1">
      <div class="box_2373X1">
        <img src="../../../public/images/logo.png" class="image_493X1">
        <p class="text_2374X1">小鹿智能助理</p>
      </div>
      <img src="../../../public/images/logo.png" class="image_494X1">
      <div class="text_2376X1">
        您好，欢迎使用luckin coffee在线咨
        询服务。如需帮助，请点击右下方的
        人工服务按钮。
      </div>
    </div>
    <van-icon name="service" size="26" class="image_492X1"/>
      <van-field v-model="value" center clearable placeholder="请输入您的问题">
        <template #button>
          <van-button size="small" type="primary" color="#88afd5" @click="sendMsg">发送</van-button>
        </template>
      </van-field>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
// 返回上一级
const onClickLeft = () => router.back()

const value2 = ref('123')

// 获取发送的消息
const value = ref('')
const sendMsg = () => {
  console.log('发送');
  console.log(value.value);
  value.value = ''
}

</script>

<style lang="scss" scoped>
.online {
  background-color: #f8f8f8;
  height: 100vh;
  position: relative;

  .text_2353X1 {
    width: 375px;
    height: 44px;
    padding-top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }

  .text_2369X1 {
    width: 375px;
    height: 30px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(217, 217, 217, 1);
    font-size: 14px;
    line-height: 30px;
    // text-align: center;

    .icon_173X1 {
      width: 20px;
      height: 20px;
      padding-left: 15px;
      font-size: 20px;
      color: rgba(153, 153, 153, 1);
      text-align: left;
    }
  }

  .box_2373X1 {
    width: 130px;
    height: 50px;
    margin-left: 123px;
    margin-top: 55px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 11px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;

    .image_493X1 {
      width: 40px;
      height: 43px;
      margin-top: -15px;
    }


    .text_2374X1 {
      width: 84px;
      height: 21px;
      margin-left: 20px;
      color: rgba(56, 56, 56, 1);
      font-size: 14px;
      line-height: 150%;
      text-align: left;
    }
  }


  .image_494X1 {
    width: 34px;
    height: 36px;
    margin-left: 10px;
    margin-top: 42px;
    background-color: #fff;
  }

  .text_2376X1 {
    width: 224px;
    height: 63px;
    margin-left: 64px;
    margin-top: -40px;
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    background-color: rgba(255, 255, 255, 1);

  }
  .image_492X1{
	width: 35px;
	height: 35px;
	margin-left: 309px;
	margin-top: 267px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  color: rgb(89, 232, 89);
  text-align: center;
  line-height:35px;
}
  .van-field {
    position: fixed;
    bottom: 0;
    left: 0;
  }

}
</style>